
import { Button } from 'antd'
import { useContext, useRef } from 'react'
import { IContent } from './data'
import { Content } from './prvoider'
const Input = () => {
  const { addTodo, todoList } = useContext(Content) as IContent
  const refInput = useRef<HTMLInputElement>(null)
  const handleClick = () => {
    const val = refInput.current?.value.trim()
    if (!val) return
    const flag = todoList.some(item => {
      return item.value === val
    })

    if (!flag) {
      addTodo({
        value: val,
        completed: false,
        id: Math.random() * 1000
      })
    }

    refInput.current!.value = ''
    refInput.current!.focus()

  }
  return (<div style={{ display: 'flex' }
  }>
    <input type="text" ref={refInput} />
    <Button type='primary' onClick={() => { handleClick() }}> add </Button>
  </div >)
}

export default Input